<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <ol>
            <li v-for="x in list">
              {{ x.text }}---{{x.address}}
            </li>
        </ol>

          <p>{{ msg }}</p>
        <button @click="reverseMessage">反转消息</button>
        <!-- @和clike中间不可以空格 -->
        <hr/>
        <div>{{"测试目标="+message}}
        </div>
        <input v-model="message">
    </div>
    <script>
        var app=new Vue({
            el: "#app",
                data: {
                   msg:"你好",
                   message: "",
                   list:[
                       {text:"西瓜",address:"湖南"},
                       {text:"椰子",address:"海南"},
                       {text:"苹果",address:"山东"}]
                     },
                methods: {
                       reverseMessage: function () {
                          this.msg = this.msg.split('').reverse().join('')
                    }
                },
                beforeCreate:function(){
                    console.log("beforeCreate!!!")
                },
                created:function(){
                    this.x="created!!!"
                    console.log("created函数被调用了!")
                },
                beforeMount(){
                    console.log("beforeMount!!!")
                },
                mounted(){
                    console.log("mounted!!!")
                },
                beforeUpdate:function(){
                    console.log("beforeUpdate")
                },
                Update:function(){
                    console.log("Update")
                },
                beforeDestroy:function(){
                    console.log("beforeDestroy")
                }
        });
    </script>
</body>
</html>